<template>
  <div>
    <!-- Banner Area Starts -->
    <section class="banner-area">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6 px-0">
            <!-- 设置背景图片-->
            <div class="banner-bg"></div>
          </div>
          <div class="col-lg-6 align-self-center">
            <div class="banner-text">
              <h1>查找你感兴趣的 <span>文章</span> 通过导航栏</h1>
              <p class="py-3">首页暂时没想好些什么，文章请点击导航栏获取…… </p>
              <a href="#" class="secondary-btn">前往<span class="flaticon-next"></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Banner Area End -->

    <!-- Search Area Starts -->
    <div class="search-area">
      <div class="search-bg">
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <form action="#" class="d-md-flex justify-content-between">
                <select>
                  <option value="1">选择全部分类</option>
                </select>
                <select>
                  <option value="1">请选择标签/月份</option>
                </select>
                <input type="text" placeholder="请输入关键字…" onfocus="this.placeholder = ''"
                  onblur="this.placeholder = '请输入关键字…'" required>
                <button type="submit" class="template-btn">笔记搜索</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Search Area End -->

    <!-- Category Area Starts -->
    <section class="category-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>图片展示</h2>
              <p>功能暂未开发…………</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <img src="assets/images/cat1.png" alt="category">
              <h4>图片展示</h4>
              <h5>功能暂未开发…………</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <img src="assets/images/cat2.png" alt="category">
              <h4>图片展示</h4>
              <h5>功能暂未开发…………</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <img src="assets/images/cat3.png" alt="category">
              <h4>图片展示</h4>
              <h5>功能暂未开发…………</h5>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="single-category text-center mb-4">
              <img src="assets/images/cat4.png" alt="category">
              <h4>图片展示</h4>
              <h5>功能暂未开发…………</h5>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Category Area End -->
    <br />
    <!-- Jobs Area Starts -->
    <section class="jobs-area section-padding3">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="jobs-title">
              <h2>文章分类</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="category-tab tab-item">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" v-for="(item, index)  in categories" :key="item.code" @click="changeTab(index)"
                  :class="{active:tabIndex==index}">
                  {{ item.message }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="tab-content" v-for="(tab, index)  in categories" :key="index" v-show="tabIndex==index">

              <div class="tab-pane fade show active" role="tabpanel">
                <div class="single-job mb-4 d-lg-flex justify-content-between"
                  v-for="(item, index)  in articles[tabIndex]" :key="index">
                  <div class="job-text">
                    <h4>{{ item.title }}</h4>
                    <ul class="mt-4">
                      <li class="mb-3">
                        <h5><i class="fa fa-map-marker"></i> 编码：{{ item.id }}</h5>
                      </li>
                      <li class="mb-3">
                        <h5><i class="fa fa-pie-chart"></i>
                          创建时间：{{ item.createTime }}
                        </h5>
                      </li>
                      <li>
                        <h5><i class="fa fa-clock-o"></i> 更新时间：{{ item.updateTime }}</h5>
                      </li>
                    </ul>
                  </div>
                  <div class="job-img align-self-center">
                    <img :src="'assets/images/cat'+(index%5+1)+'.png'" alt="job">
                  </div>
                  <div class="job-btn align-self-center">
                    <a href="#" class="third-btn job-btn2">详情</a>
                    <a href="#" class="third-btn">详情</a>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="more-job-btn mt-5 text-center">
          <a href="#" class="template-btn">查看更多</a>
        </div>
      </div>
    </section>
    <!-- Jobs Area End -->

    <!-- Newsletter Area Starts -->
    <section class="newsletter-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>功能开发中！</h2>
              <p>功能开发中……</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <p> 本项目手机端、PC端场景自适应，仅样式有变化。不开放评论功能。未申请ssh加密HTTPS请求。项目开源地址请点击联系页卡。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Newsletter Area End -->

    <!-- Download Area Starts -->
    <section class="download-area section-padding">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6">
            <div class="download-text">
              <h2>更多信息……</h2>
              <p class="py-3"> 更多信息点击联系页卡，访问开源项目……</p>
              <div class="download-button d-sm-flex flex-row justify-content-start">
                <div class="download-btn mb-3 mb-sm-0 flex-row d-flex">
                  <a href="#">
                    <p>
                      <span>跳转</span> <br>
                      top
                    </p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 pr-0">
          </div>
        </div>
      </div>
    </section>
    <!-- Download Area End -->
  </div>
</template>

<script>
  import {
    getRequest,
    serchArticlePageData
  } from '../api/Article.js'
  export default {
    data() {
      return {
        categories: [], // 文章分类数组
        tabIndex: 0, // 页签下标
        articles: [], // 按照分类个数形成标签
        pageIndex: [],
        pagesize: 1,

        pageSearch: {
          categoryCode: '',
          releaseMonth: '',
          keyWord: '',
          searchType: '1'
        },

      }
    },
    mounted() {
      var _this = this
      getRequest('/manage/web/findArticleCategory')
        .then(function(response) {
          // 初始化分类
          _this.categories = response.data.data

          // 初始化每个分类独自的分页信息和文章列表数目
          for (let i in _this.categories) {
            let pageObj = {
              total: 0,
              currentPage: 1
            }
            _this.pageIndex.push(pageObj);
            let article = []
            _this.articles.push(article);
          }
          // 初始化第一个tab标签页的数据
          _this.searchDataByCategory(_this.tabIndex);

        })
        .catch(function(error) {
          console.log(error);
        });
    },
    methods: {
      /** 切换标签页
       * @param {Object} index
       */
      changeTab(index) {
        if (this.tabIndex != index) {
          this.tabIndex = index

          // 没有初始化数据时请求一次
          if (this.pageIndex[this.tabIndex].total == 0) {
            this.seeFinish = true;
            this.searchDataByCategory(this.tabIndex)
          } else if (this.articles[this.tabIndex].length < this.pageIndex[this.tabIndex].total) {
            this.seeFinish = true;
          }
        }
      },
      searchDataByCategory: function(index) {
        var _this = this
        let currentPage = _this.pageIndex[index].currentPage;
        _this.pageSearch.categoryCode = _this.categories[index].code
        serchArticlePageData(currentPage, _this.pagesize, _this.pageSearch).then(function(response) {
            if (response.status == 200 && response.data.code == 200) {
              _this.pageIndex[index].currentPage++;
              _this.pageIndex[index].total = response.data.data.total
              for (let i in response.data.data.rows) {
                _this.articles[index].push(response.data.data.rows[i]);
              }
            }
            if (_this.articles[index].length >= _this.pageIndex[index].total) {
              _this.seeFinish = false;
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },
    }

  }
</script>
